<template lang="html">
    <div class="teacher-check">
        <nav-header> </nav-header>
        <div class="zh-table">
        <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
            <div class="open-width">
                            <el-select v-model="platform_id" filterable placeholder="来源学校/教育局">
                    <el-option
                        v-for="item in schoolList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
                        </div>
                        <div class="open-width">
                            <el-input placeholder="教师名称" v-model="keyword" @keyup.enter.native="search"></el-input>
                        </div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                </div>
        <div class="zh-table-contents" v-loading="dataLoading.status" :element-loading-text="dataLoading.txt">
                    <el-table
                        :data="listData"
                        border
                        max-height="541"
            >
                        <el-table-column
                type="index"
                        label="序号"
                        align="center"
                width="50"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        label="来源"
                        align="center"
                        show-overflow-tooltip
                        >
                <template slot-scope="scope">
                    <div v-text="scope.row.school_name"></div>
                </template>
                        </el-table-column>
                
                <el-table-column
                        prop="user_name"
                        label="教师姓名"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="number"
                        label="账号"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="subject_name"
                        label="任教科目"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="org_names"
                        label="任教班级"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                prop="create_time"
                label="推送时间"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="statusTxt"
                label="审核状态"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                fixed="right"
                prop="handle"
                label="操作"
                align="center"
                width="250"
                >
                <template slot-scope="scope">
                    <el-button type="text" @click="comment(scope.row)">推荐理由</el-button>
                    <el-button v-if="scope.row.status === 2" type="text" @click="ratify(scope.row)">批准</el-button>
                    <el-button v-if="scope.row.status === 3" type="text" @click="r_comment(scope.row)">拒绝理由</el-button>
                    <el-button v-if="scope.row.status === 2" type="text" class="delete-button" @click="rejectShow(scope.row)">拒绝</el-button>
                    <el-button v-if="scope.row.status != 2" type="text" class="delete-button" @click="del(scope.row)">删除记录</el-button>
                </template>
                </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
        </div>
        <el-dialog
        title="推荐理由"
        :visible.sync="recFlag"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="30%"
        >
        <div class="textarea-box" v-text="recTxt"></div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="recFlag = false">取 消</el-button>
            <el-button type="primary" @click="recFlag = false">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog
        title="拒绝理由"
        :visible.sync="rejectFlag"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="30%"
        >
        <div class="textarea-box" v-text="rejectTxt"></div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rejectFlag = false">取 消</el-button>
            <el-button type="primary" @click="rejectFlag = false">确 定</el-button>
        </span>
        </el-dialog>
        <el-dialog
        title="拒绝"
        :visible.sync="rejectWrite"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="30%"
        >
        <div class="textarea-box">
            <el-form :model="rejectForm"  ref="rejectForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="拒绝理由" prop="rejectTxtWrite" :rules="[{required: true,message: '请填写拒绝理由',validator: checkValue}]">
                <el-input type="textarea" placeholder="在此填写拒绝理由..." v-model="rejectForm.rejectTxtWrite" :maxlength="100" required></el-input>
            </el-form-item>
            </el-form>
            <p class="str-num"><span :class="{'str-max' : rejectForm.rejectTxtWrite.length >= 100}" v-text="rejectForm.rejectTxtWrite.length"></span>/<span class="str-max">100</span></p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rejectHide">取 消</el-button>
            <el-button type="primary" @click="reject">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
    data() {
        return {
        dataLoading:{
                    status:false,
                    txt:'获取数据...'
        },
        recFlag: false,
        recTxt: '',
        rejectFlag: false,
        rejectTxt: '',/*拒绝理由 */
        delAllFlag: false,
        rejectObj: null,/*拒绝对象 */
        rejectWrite: false,/*拒绝弹窗 */
        rejectForm: {/*拒绝表单 */
            rejectTxtWrite: '',/*拒绝理由填写 */
        },
        listData: [],
        listParam: {
            platform_id: 0,
            keyword: '',
            page_index: 1,
            page_size: 10,
        },
        keyword: '',
        total_number: 0,
        platform_id: null,
        school: '',
        schoolList: [],
        }
    },
    mounted() {},
    created() {
        this.get_canseeposition();
        this.getList();
    },
    methods: {
        getList() {
        this.dataLoading.status = true;
        let params = this.listParam;
        const success=res=>{
            this.dataLoading.status = false;
            this.listData = res.data.data;
            this.total_number = res.data.data_sum;
            this.listData.forEach(item=>{
            if(Object.is(item.status,1)) {
                item.statusTxt="通过"
            }
            if(Object.is(item.status,2)) {
                item.statusTxt="未审核"
            }
            if(Object.is(item.status,3)) {
                item.statusTxt="拒绝"
            }
            })
        }
        this.$ajax.get('api/user/auth_teacher_master_list',{params: params, func: {success: success}})
        },
        search() {
        this.listParam.platform_id = this.platform_id;
        this.listParam.keyword = this.keyword;
        this.listParam.page_index = 1;
        this.getList();
        },
        reset() {
        this.platform_id = null;
        this.keyword = '';
        this.listParam = {
            platform_id: null,
            keyword: '',
            page_index: 1,
            page_size: 10,
        }
        this.getList();
        },
        handleSizeChange(size) {
        this.listParam.page_size = size;
        this.getList();
        },
        handleCurrentChange(page) {
        this.listParam.page_index = page;
        this.getList();
        },
        toLink(link) {
        this.$router.push(link);
        },
        get_canseeposition() {
        const success=res=>{
            this.schoolList = res.data.data;
        }
        this.$ajax.get('api/level/get_canseeposition_school', { params: {},func: {success: success}})
        },
        comment(obj) {
        this.recFlag = true;
        this.recTxt = obj.a_comment ? obj.a_comment : '';
        },
        r_comment(obj) {
        this.rejectFlag = true
        this.rejectTxt = obj.r_comment ? obj.r_comment : '';
        },
        checkValue(rule, value, callback) {
            if (!checkSpace(value)) {
            callback(new Error("请输入有效值"));
                    }else {
            callback();
            }
        },
        checkMaster(id,status,comment) {
        let params = {
            id: id,
            status: status,
            r_comment: comment
        }
        const success=res=>{
            if(comment) { 
            this.rejectHide();
            }
            this.getList();
        }
        this.$ajax.put('api/user/teacher_master',params,{func:{success:success}})
        },
        ratify(obj) {
            this.$confirm('是否批准该老师为名师?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.checkMaster(obj.id,1);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消批准'
                });          
            });
        },
        rejectShow(obj) {
            this.rejectWrite = true;
            this.rejectObj = obj;
        },
        rejectHide() {
            this.$refs.rejectForm.clearValidate();
            this.rejectWrite = false;
            this.rejectForm.rejectTxtWrite = '';
            this.rejectObj = null;
        },
        reject() {
        this.$refs[`rejectForm`].validate(valid => {
            if (valid) {
            this.checkMaster(this.rejectObj.id,3,this.rejectForm.rejectTxtWrite);
            } else {
            return;
            }
        })
        },
        delFun(id) {
            let params = {
                id: id
            }
            const success=res=>{
                this.$message({ type: 'success', message: res.msg });

                if (this.listData.length - 1 === 0) {
                    if (this.listParam.page_index > 1) {
                        this.listParam.page_index-- ;
                    } else {
                        this.listParam.page_index = 1;
                    }
                }

                this.getList();
            }
            this.$ajax.delete('api/user/teacher_master_push',{params:params,func:{success:success}})
        },
        del(obj) {
            this.$confirm('是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                this.delFun(obj.id);
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
                });
            }
        },
    }
</script>

<style lang="scss">
    .teacher-check {
        .textarea-box {
            position: relative;
                word-break: break-all;
                word-wrap: break-word;

            .el-textarea__inner {
            min-height: 80px !important;
            resize: none;
            }
            .str-num {
            position: absolute;
            padding: 0;
            margin: 0;
            left: 0;
            bottom: 5px;
            right: 15px;
            text-align: right;
            .str-max {
                color: #ddd;
            }
            }
        }
    }
</style>
